<template>
  <image v-bind="$attrs" :mode="mode" class="tz-image" @tap="handleTap">
    <slot />
  </image>
</template>
<script>
export default {
  name: "TzImage",
  inheritAttrs: false,
  props: {
    mode: {
      type: String,
      default: "aspectFill",
    },
  },
  emits: ["click"],
  setup(props, { emit }) {
    const handleTap = (event) => {
      emit("click", event);
    };
    return { handleTap };
  },
};
</script>

<style lang="scss">
.tz-image {
  max-height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
